<script setup>
import { ref,reactive,onMounted } from 'vue';
import {getUserListAPI, enableUserAPI,resetPasswordAPI} from '@/apis/user'
const userList = ref([])
const pageInfo= reactive({
  page: 1,
  size: 10,
  total: 0,
  current: 1,
})

const resetPassword = async (email) => {
  await resetPasswordAPI(email).then((result) => {
    ElMessage.success(result.message)
  }).catch((err) => {
    console.log(err);
  });
  getUserList()
}
const taggleStatus = async (email) => {
  await enableUserAPI(email).then((result) => {
    ElMessage.success(result.message)
  }).catch((err) => {
    console.log(err);
  });
  getUserList()
}

const getUserList = async () => {
  const res = await getUserListAPI()
  userList.value = res.data.records
  pageInfo.total = res.data.total
  pageInfo.current = res.data.current
  pageInfo.size = res.data.size
}
const handlePageChange = (currentPage) => {
  pageInfo.current = currentPage
  getUserList()
}
onMounted(() => {
  getUserList()
})
</script>

<template>
  <div class="user-list">
    <el-table :data="userList" style="width: 100%" :border="true" :fit="true" :header-align="'center'" :align="'center'" :table-layout="'auto'">
      <el-table-column prop="id" label="ID" width="200" />
    <el-table-column prop="username" label="用户名" width="200" />
    <el-table-column prop="email" label="邮箱" width="300" />
    <el-table-column prop="phone" label="手机号" width="300" />
    <el-table-column prop="nickname" label="昵称" width="100" />
    <el-table-column prop="createTime" label="创建时间" width="300" >
<!--    <el-table-column  label="状态" width="100" >-->
<!--      <template #default="scope">-->
<!--        <el-tag type="success" v-if="scope.row.status === 1">启用</el-tag>-->
<!--        <el-tag type="danger" v-else>禁用</el-tag>-->
<!--      </template>-->
    </el-table-column>
<!--    <el-table-column  label="操作" fixed="right" width="150">-->
<!--      <template #default="scope">-->
<!--        <el-button link type="primary" size="small" @click="resetPassword(scope.row.email)"-->
<!--          >重置密码</el-button-->
<!--        >-->
<!--        <el-button link type="primary" size="small" @click="taggleStatus(scope.row.email)">切换状态</el-button>-->
<!--      </template>-->
<!--    </el-table-column>-->
  </el-table>
  <div class="user-list-pagination">
    <el-pagination v-model:currentPage="pageInfo.current" :page-size="pageInfo.size" :total="pageInfo.total"
      layout="total, prev, pager, next" @current-change="handlePageChange"></el-pagination>
  </div>
</div>
</template>

<style scoped lang="scss">
.user-list-pagination {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}
</style>
